<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>幻灯片</title>
		<link rel="stylesheet" type="text/css" href="./slider.css"/>
	</head>
	<body>
		<div id="slider" class="slider">
			<div class="slider-item-container">
				<div class="slider-item">
					<a href="###" class="slider-link">
						<img src="./img/1.jpg" alt="slider" class="slider-img">
					</a>
				</div>
				<div class="slider-item">
					<a href="###" class="slider-link">
						<img src="./img/2.jpg" alt="slider" class="slider-img">
					</a>
				</div>
				<div class="slider-item">
					<a href="###" class="slider-link">
						<img src="./img/3.jpg" alt="slider" class="slider-img">
					</a>
				</div>
				<div class="slider-item">
					<a href="###" class="slider-link">
						<img src="./img/4.jpg" alt="slider" class="slider-img">
					</a>
				</div>
				<div class="slider-item">
					<a href="###" class="slider-link">
						<img src="./img/5.jpg" alt="slider" class="slider-img">
					</a>
				</div>
			</div>
		</div>
		<script src="./hammer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./slider.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var slider = new Slider(document.getElementById("slider"), {
				initIndex: 0,
				speed: 300,
				hasIndicator: true
			});
			
			var hammer = new Hammer(slider.getItemContainer());
			
			var isSwiping = false;
			
			hammer.on('panmove', function(e){
				var distance = e.deltaX + slider.getDistanceByIndex(slider.getIndex());
				slider.move(distance);
			});
			
			hammer.on('panend', function(e){
				if (isSwiping) return;
				var distance = e.deltaX + slider.getDistanceByIndex(slider.getIndex());
				var index = getIndexByDistance(distance);
				slider.to(index);
			});
			
			function getIndexByDistance(distance){
				if (distance > 0) {
					return 0;
				} else {
					return Math.round(-distance / slider.getDistancePerSlide());
				}
			}
			
			hammer.on('swipeleft', function(e){
				isSwiping = true;
				slider.next(function(){
					isSwiping = false;
				});
			});
			
			hammer.on('swiperight', function(e){
				isSwiping = true;
				slider.prev(function(){
					isSwiping = false;
				});
			});
		</script>
	</body>
</html>
